<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频列表</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .container {
            width: 1000px;
            margin: 50px auto;
        }
        hr{
            margin: 15px auto;
        }
        .item{
            width: 20%;
            float:left;
            padding: 0 15px;
        }
        .item img{
            width: 100%;
        }
        h4{
            font-weight: normal;
        }
        p{
            font-size: 12px;
            padding: 10px 0;
        }
        .video-list{
            margin: 0 -15px;
        }
    </style>
</head>

<body>
    <div id="root">
        
    </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //外部数据   以后会通过 AJAX 请求获得
        let videos = [ { is_living: true,"title": "创维也有汽车啦？静静体验创维EV6", "author": "车若初见", "img": "https://picsum.photos/400/300?image=10" }, { "title": "《俄罗斯边疆行》第一集：莫斯科战争与和平", "author": "萨马尔罕", "img": "https://picsum.photos/400/300?image=11" }, { "title": "中文版BeautyBox视频磨皮美颜插件", "author": "爱生活的乐先生", "img": "https://picsum.photos/400/300?image=12" }, { "title": "中国妖怪历史发展与远渡东瀛", "author": "一刻talks", "img": "https://picsum.photos/400/300?image=13" }, { "title": "探索城市中可以让你休闲娱乐一整天小鹏展厅", "author": "R视觉", "img": "https://picsum.photos/400/300?image=14" }, { "title": "指尖轻触，幻化百变桌面互动投影装置", "author": "数艺网", "img": "https://picsum.photos/400/300?image=15" }, { "title": "全球首创， IV重型火箭在佛罗里发射启动", "author": "数艺网", "img": "https://picsum.photos/400/300?image=16" }, { "title": "夏天的风 森林篇  #Kobe24#", "author": "金梓江", "img": "https://picsum.photos/400/300?image=17" }, { "title": "夏天的风 都市篇 #BOSTON 11#", "author": "金梓江", "img": "https://picsum.photos/400/300?image=18" }, { "title": "来自意大利海岸的柠檬香气", "author": "Fabrique", "img": "https://picsum.photos/400/300?image=19" }, { "title": "穿上南半球服装的里程碑", "author": "Fabrique", "img": "https://picsum.photos/400/300?image=20" }, { "title": "什么时装朋克又优雅？", "author": "Fabrique", "img": "https://picsum.photos/400/300?image=21" }, { "title": "捷尼赛思G80/GV80优雅的完美主义者", "author": "极车制造", "img": "https://picsum.photos/400/300?image=22" }, { "title": "河道里捡块和田玉 能否卖出100w人民币", "author": "萝卜报告", "img": "https://picsum.photos/400/300?image=23" }, { "title": "导演手记——“名角”们大都有相似之处", "author": "汤圆视频", "img": "https://picsum.photos/400/300?image=24" }, { "title": "【IWC万国绿飞计】限量礼盒版开箱作业", "author": "野生11", "img": "https://picsum.photos/400/300?image=25" }, { "title": "小心这些症状，抑郁症可能已经在逼近", "author": " Psych2Go", "img": "https://picsum.photos/400/300?image=26" }, { "title": "“情侣冷战”用英文怎么说？", "author": "Tommy美语", "img": "https://picsum.photos/400/300?image=27" }, { "title": "主播真会玩主机篇番外篇", "author": "起小点是大腿", "img": "https://picsum.photos/400/300?image=28" }, { "title": "保持专注：11个心理提示", "author": " Psych2Go", "img": "https://picsum.photos/400/300?image=29" }, { "title": "我们唯一的家园，地球", "author": " Pick Up Limes", "img": "https://picsum.photos/400/300?image=30" }, { "title": "与人交流，也需要技巧", "author": "BRAINY DOSE ", "img": "https://picsum.photos/400/300?image=31" }, { "title": "家庭风味自制甜点，奥利奥芝士蛋糕", "author": "Cooking Tree", "img": "https://picsum.photos/400/300?image=32" }, { "title": "2 分钟 get 小技巧：用 PPT 整理笔记", "author": "Mariana's study corner", "img": "https://picsum.photos/400/300?image=33" }, { "title": "你会因为被当作局外人而产生焦虑吗？", "author": "TEDx", "img": "https://picsum.photos/400/300?image=34" }, { "title": "Dorothy Cross：我的灵感来自于自然", "author": "Tate", "img": "https://picsum.photos/400/300?image=35" }, { "title": "仓鼠酒店，太高级了", "author": "SIMI TV", "img": "https://picsum.photos/400/300?image=36" }, { "title": "巧克力大理石方块面包教程，「真香」警告！", "author": "Cooking Tree", "img": "https://picsum.photos/400/300?image=37" }, { "title": "抹茶芝士蛋糕，双层双倍快乐！", "author": "Cooking Tree", "img": "https://picsum.photos/400/300?image=38" }, { "title": "糖果色圣诞树，香甜的马卡龙", "author": "Cooking Tree", "img": "https://picsum.photos/400/300?image=39" }];
        
        //组件封装
        class VideoItem extends React.Component {
            render(){
                //获取
                let {img, title, author} = this.props;
                return <div className="item">
                    <img src={img} alt="" />
                    <h4>{title}</h4>
                    <p>{author}</p>
                </div>
            }
        }


        //声明类式组件
        class App extends React.Component{
            render(){
                return <div className="container">
                    <h2>视频列表</h2>
                    <hr />
                    <div className="video-list">
                        {
                            videos.map((item, index) => {
                                return <VideoItem key={index}  {...item}   />
                            })
                        }
                    </div>
                </div>;
            }
        }

        //渲染
        ReactDOM.render(<App />, document.querySelector("#root"));

    </script>
</body>

</html>